<template>
      <div>
        <el-table
              border
              stripe
              :data="newlists"
              style="width: 100%">
                    <el-table-column  prop="id" label="序号" width="80"></el-table-column>
                    <el-table-column  prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column  label="头像" width="160">
                        <template slot-scope="scope">
                            <el-avatar  :src="scope.row.image || defaultavater"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="80"></el-table-column>
                    <el-table-column prop="hobbys" label="爱好">
                        <template slot-scope="scope">
                            <el-tag  v-for="(item,index)  in scope.row.hobbys" :key="index" size="mini">
                                {{item}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="260">
                         <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edititem(scope.row.id)">编辑</el-button>
                            <el-button type="danger"  icon="el-icon-delete" size="mini" @click="deleteitem(scope.row.id)">删除</el-button>
                         </template>
                    </el-table-column>
            </el-table>  
            <!-- 编辑对话框 -->
             <el-dialog
                title="修改用户信息"
                :visible.sync="editdialogVisible"
                width="30%">
                <el-form :model="editruleForm" :rules="editrules" ref="editruleForm" label-width="80px">
                    <el-form-item label="用户名" prop="name">
                         <el-input v-model="editruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                         <el-input v-model="editruleForm.age"></el-input>
                    </el-form-item>
                     <el-form-item label="爱好" prop="hobbys">
                      <el-checkbox-group v-model="editruleForm.hobbys">
                        <el-checkbox label="eat" name="hobbys"></el-checkbox>
                        <el-checkbox label="code" name="hobbys"></el-checkbox>
                        <el-checkbox label="play" name="hobbys"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                     <el-button @click="canleedite">取 消</el-button>
                     <el-button type="primary" @click="sureedit">确 定</el-button>
                </span>
            </el-dialog>
           
      </div>
</template>

<script>
export default {
    props:['newlists','defaultavater'],
    data() {
         //自定义年龄的校验规则
        var validatoremail = (rule,value,callback)=>{
             let reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/ 
            if(reg.test(value))
            return callback()
            callback(new Error("请输入合法的年龄"))
        }
        return {
            editdialogVisible:false,
            editruleForm:{
                 id:"id",
                 image:"",
                 name:"",
                 age:'',
                 hobbys:[]
             },
             editrules:{
                   name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                    ],
                   age: [
                        { required: true, message: '请输入用户年龄', trigger: 'blur' },
                         { validator: validatoremail,  trigger: 'blur' },
                    ],
                    hobbys: [
                         { type: 'array', required: true, message: '请至少选择一个项爱好', trigger: 'change' }
                    ],
             }
        };
    },

    mounted() {
        
    },

    methods: {
        edititem(id){
            this.$emit("edititem",id)
            // 往弹出框填充数据
            let editobj = this.newlists.filter(item=>item.id==id)
            this.editruleForm = editobj[0]
            this.editdialogVisible = true
        },
        deleteitem(id){
            this.$emit("deleteitem",id)
            this.$message.success("删除用户成功")

        },
        // 点击了取消修改
        canleedite(){
            this.editdialogVisible = false
            this.$message.warning("取消了本次操作")

        },
        // 点击了确认修改
        sureedit(){
            // 生成一份新的数据
            let newobj = {...this.editruleForm,image:this.defaultavater}
            // 通知父组件数据改变了
            this.$emit("edituserinfo",newobj)
            this.editdialogVisible = false
            this.$message.success("修改用户信息成功")

        },
       
    },
};
</script>

<style scoped>
.el-tag{
    margin: 6px;
  }

</style>